<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsDiagramCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsDiagramCanvas');
        const ctx = canvas.getContext('2d');

        // --- General Style Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        // Use a font list for better compatibility with both Latin and Chinese characters.
        ctx.font = '22px "Times New Roman", "SimSun"'; 
        ctx.textBaseline = 'middle';

        // --- Drawing Parameters ---
        const rodLength = 300;
        const xStart = 70;
        const y1 = 100; // y-coordinate for the top rod (Rod 1)
        const y2 = 220; // y-coordinate for the bottom rod (Rod 2)
        const arrowLength = 50;
        const arrowheadSize = 8;
        const labelOffset = 30; // Vertical offset for labels above the rod
        const sideLabelOffset = 20; // Horizontal offset for labels to the right of the rod

        // --- Draw Top System (Rod 1) ---
        
        // 1. Draw the rod
        ctx.beginPath();
        ctx.moveTo(xStart, y1);
        ctx.lineTo(xStart + rodLength, y1);
        ctx.stroke();

        // 2. Draw the impulse arrow 'J'
        const arrowX = xStart;
        // Arrow shaft
        ctx.beginPath();
        ctx.moveTo(arrowX, y1 + arrowLength);
        ctx.lineTo(arrowX, y1);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(arrowX, y1);
        ctx.lineTo(arrowX - arrowheadSize / 2, y1 + arrowheadSize);
        ctx.moveTo(arrowX, y1);
        ctx.lineTo(arrowX + arrowheadSize / 2, y1 + arrowheadSize);
        ctx.stroke();

        // 3. Draw the labels for Rod 1
        // Label 'J'
        ctx.textAlign = 'center';
        ctx.fillText('J', arrowX - 20, y1 + arrowLength / 2);
        // Label 'm,l'
        ctx.fillText('m,l', xStart + rodLength / 2, y1 - labelOffset);
        // Label '杆1'
        ctx.textAlign = 'left';
        ctx.fillText('杆1', xStart + rodLength + sideLabelOffset, y1);

        // --- Draw Bottom System (Rod 2) ---

        // 1. Draw the rod
        ctx.beginPath();
        ctx.moveTo(xStart, y2);
        ctx.lineTo(xStart + rodLength, y2);
        ctx.stroke();
        
        // 2. Draw the hinge in the middle
        const hingeSize = 10;
        const hingeX = xStart + rodLength / 2;
        const hingeY = y2;
        // Erase a small part of the rod line by drawing a white filled square
        ctx.fillStyle = 'white';
        ctx.fillRect(hingeX - hingeSize / 2, hingeY - hingeSize / 2, hingeSize, hingeSize);
        // Draw the black outline for the hinge
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.strokeRect(hingeX - hingeSize / 2, hingeY - hingeSize / 2, hingeSize, hingeSize);
        
        // Reset styles for subsequent drawing
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';

        // 3. Draw the impulse arrow 'J'
        // Arrow shaft
        ctx.beginPath();
        ctx.moveTo(arrowX, y2 + arrowLength);
        ctx.lineTo(arrowX, y2);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(arrowX, y2);
        ctx.lineTo(arrowX - arrowheadSize / 2, y2 + arrowheadSize);
        ctx.moveTo(arrowX, y2);
        ctx.lineTo(arrowX + arrowheadSize / 2, y2 + arrowheadSize);
        ctx.stroke();

        // 4. Draw the labels for Rod 2
        // Label 'J'
        ctx.textAlign = 'center';
        ctx.fillText('J', arrowX - 20, y2 + arrowLength / 2);
        // Label 'm,l'
        ctx.fillText('m,l', xStart + rodLength / 2, y2 - labelOffset);
        // Label '杆2'
        ctx.textAlign = 'left';
        ctx.fillText('杆2', xStart + rodLength + sideLabelOffset, y2);

        // --- Draw the Caption ---
        ctx.textAlign = 'center';
        ctx.fillText('力图 6.24.1', canvas.width / 2, 350);

    </script>
</body>
</html>